<!--
 * @Author: mayijun
 * @Date: 2022-06-16 13:48:36
 * @LastEditors: mayijun
 * @LastEditTime: 2022-08-10 10:38:01
-->
<script lang="ts" setup>
import API from '@/services';
import plus from '@/assets/images/plus.svg';
import minus from '@/assets/images/minus.svg';
import { PropType, reactive, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

let props = defineProps({
  isStatPeriodSelect: {
    type: Boolean,
    default: false
  },
  //时间频度
  countDateType: {
    type: String,
    default: ''
  },
  //统计周期对象
  countCycle: {
    type: Object as PropType<defs.CountCycleDto>,
    default: () => {
      return {};
    }
  },
  deriveModel: {
    type: Object as PropType<defs.DeriveModelDto>,
    default: () => {
      return {};
    }
  },
  isFast: {
    type: Boolean,
    default: true
  },
  isRequired: {
    type: Boolean,
    default: false
  }
});
//获取统计周期对象
const emit = defineEmits(['update:isStatPeriodSelect']);

const route = useRoute();
//上线状态
let status = ref<any>(route.query.status);

const state = reactive({
  periodlist: [] as any[],
  dateTypelist: [] as any[]
});

// 查询统计周期列表
const getCountType = async () => {
  const { code, data } = await API.enumBao.getGetCountType();
  if (code === 200 && Array.isArray(data)) {
    //统计周期只能大于统计粒度
    state.periodlist = data.filter((item) => {
      //周
      if (
        props.countDateType == 'week' &&
        (item.value == 'same_week' ||
          item.value == 'same_month' ||
          item.value == 'same_quarter' ||
          item.value == 'same_year' ||
          item.value == 'lately' ||
          item.value == 'customize')
      ) {
        return item;
      }
      //月
      else if (
        props.countDateType == 'month' &&
        (item.value == 'same_month' ||
          item.value == 'same_quarter' ||
          item.value == 'same_year' ||
          item.value == 'lately' ||
          item.value == 'customize')
      ) {
        return item;
      }
      //季度
      else if (
        props.countDateType == 'quarter' &&
        (item.value == 'same_quarter' ||
          item.value == 'same_year' ||
          item.value == 'lately' ||
          item.value == 'customize')
      ) {
        return item;
      }
      //年
      else if (
        props.countDateType == 'year' &&
        (item.value == 'same_year' ||
          item.value == 'lately' ||
          item.value == 'customize')
      ) {
        return item;
      } else if (
        props.countDateType == 'day' ||
        props.countDateType == 'hour' ||
        props.countDateType == ''
      ) {
        return item;
      }
    });
  }
};

// 查询日期单位列表
const getCountUnitType = async () => {
  const { code, data } = await API.enumBao.getGetCountUnitType();
  if (code === 200 && Array.isArray(data)) {
    //统计周期只能大于统计粒度
    state.dateTypelist = data.filter((item) => {
      //周
      if (
        props.countDateType == 'week' &&
        (item.value == 'week' ||
          item.value == 'month' ||
          item.value == 'quarter' ||
          item.value == 'year')
      ) {
        return item;
      }
      //月
      else if (
        props.countDateType == 'month' &&
        (item.value == 'month' ||
          item.value == 'quarter' ||
          item.value == 'year')
      ) {
        return item;
      }
      //年
      else if (props.countDateType == 'year' && item.value == 'year') {
        return item;
      } else if (
        props.countDateType == 'day' ||
        props.countDateType == 'hour' ||
        props.countDateType == ''
      ) {
        return item;
      }
    });
  }
};

//添加周期
const addPeriod = () => {
  props.countCycle.begin = 0;
  props.countCycle.end = undefined;
  emit('update:isStatPeriodSelect', true);
};

//删除周期
const removePeriod = () => {
  emit('update:isStatPeriodSelect', false);
  //恢复默认为原子指标的统计周期
  props.deriveModel.timeframe = props.countDateType;
  props.countCycle.type = '';
  props.countCycle.unit = '';
};

//改变周期
const changePeriod = (val: any) => {
  props.countCycle.begin = 1; //天数
  props.countCycle.unit = state.dateTypelist[0].value;
  props.countCycle.type = val;
  if (val == 'customize') {
    props.countCycle.end = 1;
  } else {
    props.countCycle.end = undefined;
    //统计周期匹配单位
    periodUnit(val);
  }
};

const periodUnit = (val?: string) => {
  if (val == 'same_day') {
    props.countCycle.unit = 'day';
  } else if (val == 'same_week') {
    props.countCycle.unit = 'week';
  } else if (val == 'same_month') {
    props.countCycle.unit = 'month';
  } else if (val == 'same_quarter') {
    props.countCycle.unit = 'quarter';
  } else if (val == 'same_year') {
    props.countCycle.unit = 'year';
  }
};

//快捷统计周期
const fastDate = (val: number, type: string) => {
  addPeriod();
  props.countCycle.type = 'lately'; //最近
  props.countCycle.begin = val; //天数
  props.countCycle.unit = type;
};

watch(
  () => [props.isStatPeriodSelect, props.countDateType],
  (val) => {
    if (val[0] || val[1]) {
      getCountType();
      getCountUnitType();
    }
  },
  { immediate: true }
);
//时间频度赋值
watch(
  () => props.countCycle.unit,
  (val) => {
    if (val) {
      props.deriveModel.timeframe = props.countCycle.unit;
    }
  }
);
</script>
<template>
  <div class="period-item">
    <div class="stat-period" v-show="props.isStatPeriodSelect">
      <a-select
        placeholder="请选择"
        v-model="props.countCycle.type"
        :style="{ width: '120px' }"
        @change="changePeriod"
        :disabled="status == 1"
      >
        <a-option
          v-for="item in state.periodlist"
          :key="item.value"
          :value="item.value"
          >{{ item.label }}</a-option
        >
      </a-select>
      <!-- 最近日期 -->
      <div class="time-item" v-if="props.countCycle.type == 'lately'">
        <a-input-number
          :disabled="status == 1"
          v-model="props.countCycle.begin"
          :style="{ width: '66px' }"
          :min="1"
          :precision="0"
        />
      </div>
      <div class="time-item" v-if="props.countCycle.type == 'lately'">
        <a-select
          v-model="props.countCycle.unit"
          :disabled="status == 1"
          :style="{ width: '78px' }"
        >
          <a-option
            v-for="item in state.dateTypelist"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-option
          >
        </a-select>
      </div>
      <div class="label1" v-if="props.countCycle.type == 'customize'">[</div>
      <div class="label" v-if="props.countCycle.type == 'customize'">之前</div>
      <!-- 自定义时段开始时间 -->
      <div class="time-item" v-if="props.countCycle.type == 'customize'">
        <a-input-number
          :disabled="status == 1"
          v-model="props.countCycle.begin"
          :style="{ width: '66px' }"
          :min="1"
          :precision="0"
        />
      </div>
      <div class="time-item" v-if="props.countCycle.type == 'customize'">
        <a-select
          v-model="props.countCycle.unit"
          :disabled="status == 1"
          :style="{ width: '78px' }"
        >
          <a-option
            v-for="item in state.dateTypelist"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-option
          >
        </a-select>
      </div>
      <div class="label1" v-if="props.countCycle.type == 'customize'">,</div>
      <div class="label" v-if="props.countCycle.type == 'customize'">之前</div>
      <!-- 自定义时段结束时间 -->
      <div class="time-item" v-if="props.countCycle.type == 'customize'">
        <a-input-number
          :disabled="status == 1"
          v-model="props.countCycle.end"
          :style="{ width: '66px' }"
          :min="1"
          :precision="0"
        />
      </div>
      <div class="time-item" v-if="props.countCycle.type == 'customize'">
        <a-select
          v-model="props.countCycle.unit"
          :disabled="status == 1"
          :style="{ width: '78px' }"
        >
          <a-option
            v-for="item in state.dateTypelist"
            :key="item.value"
            :value="item.value"
            >{{ item.label }}</a-option
          >
        </a-select>
      </div>
      <div class="label1" v-if="props.countCycle.type == 'customize'">]</div>
      <div class="last" v-if="!props.isRequired">
        <a-button type="text" @click="removePeriod" :disabled="status == 1">
          <img :src="minus" />
        </a-button>
      </div>
    </div>
    <div class="add-btn-div" v-show="!props.isStatPeriodSelect">
      <a-button type="text" @click="addPeriod" :disabled="status == 1">
        <img :src="plus" />
      </a-button>
    </div>

    <div class="fast" v-if="props.isFast">
      <span class="label">快捷配置：</span>
      <a-button
        :disabled="status == 1"
        v-if="
          props.countDateType != 'year' &&
          props.countDateType != 'quarter' &&
          props.countDateType != 'month' &&
          props.countDateType != 'week'
        "
        type="text"
        @click="fastDate(3, 'day')"
        >最近3天</a-button
      >
      <a-button
        :disabled="status == 1"
        v-if="
          props.countDateType != 'year' &&
          props.countDateType != 'quarter' &&
          props.countDateType != 'month' &&
          props.countDateType != 'week'
        "
        type="text"
        @click="fastDate(7, 'day')"
        >最近7天</a-button
      >
      <a-button
        :disabled="status == 1"
        v-if="
          props.countDateType != 'year' &&
          props.countDateType != 'quarter' &&
          props.countDateType != 'month' &&
          props.countDateType != 'week'
        "
        type="text"
        @click="fastDate(30, 'day')"
        >最近30天</a-button
      >
      <a-button
        :disabled="status == 1"
        v-if="
          props.countDateType != 'year' &&
          props.countDateType != 'quarter' &&
          props.countDateType != 'month'
        "
        type="text"
        @click="fastDate(1, 'week')"
        >最近1周</a-button
      >
      <a-button
        :disabled="status == 1"
        v-if="
          props.countDateType != 'year' &&
          props.countDateType != 'quarter' &&
          props.countDateType != 'month'
        "
        type="text"
        @click="fastDate(2, 'week')"
        >最近2周</a-button
      >
      <a-button
        :disabled="status == 1"
        v-if="props.countDateType != 'year' && props.countDateType != 'quarter'"
        type="text"
        @click="fastDate(1, 'month')"
        >最近1个月</a-button
      >
      <a-button
        :disabled="status == 1"
        v-if="props.countDateType != 'year' && props.countDateType != 'quarter'"
        type="text"
        @click="fastDate(3, 'month')"
        >最近3个月</a-button
      >
      <a-button
        :disabled="status == 1"
        v-if="props.countDateType != 'year' && props.countDateType != 'quarter'"
        type="text"
        @click="fastDate(6, 'month')"
        >最近6个月</a-button
      >
    </div>
  </div>
</template>
<style lang="scss" scoped>
@import './index.scss';
</style>